<template>
  {{count}}
  <button @click="handleClick">增加</button>
</template>

<script>
import { reactive, toRefs, onMounted, onUpdated, onUnmounted } from 'vue'

export default {
    setup () {
        const state = reactive({
            count: 0
        })
        const handleClick = () => state.count++
        // onMounted注册回调
        onMounted(() => {
            console.log('onMounted')
        })

        onUpdated(() => {
            console.log('onUpdated')
        })
        onUnmounted(() => {
            console.log('ononUnmounted','销毁定时器，取消订阅')
        return {
            ...toRefs(state),
            handleClick
        }
    }
}
</script>

<style scoped>

</style>